import { useCallback, useEffect, useState } from "react";
import { Flex, Button, Radio } from "antd";
import { io } from "socket.io-client";
import classnames from "classnames";
import "./test.less";

let socketObjectAAAAAA = null;

export default function TestPage() {
  const [radioValue, setRadio] = useState("http://localhost:3000");
  const [userList, setUserList] = useState([]);
  const [SOCKET, setSOCKET] = useState(null);
  const [useUser, setUseUser] = useState(""); //现在选择的用户

  function handleDefautlEvent() {
    console.log("start");
    // const socket = socketIO.connect("http://localhost:3000");

    const socket = io(radioValue);

    socket.on("connect", () => {
      console.log("connect");
      setSOCKET(socket);
    });
    socketObjectAAAAAA = socket;

    socket.on("update-user-list", ({ users }) => {
      console.log("用户列表", users);
      setUserList(users);
    });

    socket.on("remove-user", (socketId) => {
      console.log("remove-user", socketId);
    });
  }

  async function callUser(id) {
    setUseUser(id);
  }

  function onChangeRadio(e) {
    setRadio(e.target.value);
  }
  function handleDisconnect() {
    console.log("断开");
    SOCKET.socketObject.disconnect();
  }

  return (
    <>
      <div>
        <Radio.Group onChange={onChangeRadio} value={radioValue}>
          <Radio value="http://localhost:3000">http://localhost:3000</Radio>
          <Radio value="http://192.168.1.118:3000">
            http://192.168.1.118:3000
          </Radio>
        </Radio.Group>
      </div>
      <div className="myContainer">
        <Flex gap="middle">
          <Button type="primary" onClick={handleDefautlEvent}>
            默认
          </Button>
          <Button type="primary" onClick={handleDisconnect}>
            断开连接
          </Button>
        </Flex>
        <div className="container">
          <header className="header">
            <div className="logo-container">
              <img
                src={new URL("../../assets/doge.png", import.meta.url).href}
                alt="doge logo"
                className="logo-img"
              />
              <h1 className="logo-text">
                {/* Doge<span className="logo-highlight">ller</span> */}
                我是:{SOCKET.id}
              </h1>
            </div>
          </header>
          <div className="content-container">
            <div className="active-users-panel" id="active-user-container">
              <h3 className="panel-title">在线:</h3>
              {userList.map((socketId, index) => {
                return (
                  <div
                    className={classnames(
                      "active-user",
                      useUser == socketId && "active-user--selected"
                    )}
                    key={index}
                    onClick={() => callUser(socketId)}
                  >
                    <p className="username">{`socketId:${socketId}`}</p>
                  </div>
                );
              })}
            </div>
            <div className="video-chat-container">
              <h2 className="talk-info" id="talking-with-info">
                点击左边
              </h2>
              <div className="video-container">
                <video className="remote-video" id="remote-video"></video>
                <video muted className="local-video" id="local-video"></video>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
